import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { GlitchPass } from "three/addons/postprocessing/GlitchPass.js";
import { AfterimagePass } from "three/addons/postprocessing/AfterimagePass.js";
import { FilmPass } from "three/addons/postprocessing/FilmPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
import { HalftonePass } from "three/addons/postprocessing/HalftonePass.js";
import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
import { SMAAPass } from "three/addons/postprocessing/SMAAPass.js";
import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
import { GammaCorrectionShader } from "three/addons/shaders/GammaCorrectionShader.js";


const scene = new THREE.Scene();

const boxGeometry = new THREE.BoxGeometry(200, 200, 200);
const boxMaterial = new THREE.MeshLambertMaterial({
	color: 0x00ff00,
});
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(boxMesh);

// 添加光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(500, 400, 300);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0x404040, 1);
scene.add(ambientLight);

// 创建相机
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
camera.position.set(400, 500, 600);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
	// antialias: true, // 抗锯齿
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);

//轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", function () {
	renderer.render(scene, camera);
});

//调试工具
const gui = new GUI();

// 渲染
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const glitchPass = new GlitchPass();
composer.addPass(glitchPass);

// const afterimagePass = new AfterimagePass();
// composer.addPass(afterimagePass);

// const filmPass = new FilmPass(0.5, true);
// composer.addPass(filmPass);

// const v = new THREE.Vector2(window.innerWidth, window.innerWidth);
// const bloomPass = new UnrealBloomPass(v);
// bloomPass.strength = 0.8;
// bloomPass.radius = 10;
// composer.addPass(bloomPass);

// const halftonePass = new HalftonePass({
// 	radius: 8,
// });
// composer.addPass(halftonePass);

// const v = new THREE.Vector2(window.innerWidth, window.innerWidth);
// const outlinePass = new OutlinePass(v, scene, camera);
// outlinePass.selectedObjects = [boxMesh];
// outlinePass.visibleEdgeColor.set('blue');
// outlinePass.edgeStrength = 20;
// outlinePass.edgeThickness = 10;
// outlinePass.pulsePeriod = 1;
// composer.addPass(outlinePass);

// SMAA Pass
// const pixelRatio = renderer.getPixelRatio();
// const smaaPass = new SMAAPass(width * pixelRatio, height * pixelRatio);
// composer.addPass(smaaPass);
// // 伽马校正，避免颜色失真
// const gammaPass= new ShaderPass(GammaCorrectionShader);
// composer.addPass(gammaPass);





let currrentPass;
function render() {
	composer.render();
	requestAnimationFrame(render);
}
render();

const btns = document.getElementsByTagName("button");
for (let i = 0; i < btns.length; i++) {
	btns[i].onclick = function () {
		if (currrentPass) {
			composer.removePass(currrentPass);
		}
		const type = parseInt(this.getAttribute("data-type"));
		render(null, type);
	};
}
